<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .datu {
            width: 480px;
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 480px;
            float: left;
            overflow: hidden;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

        .boxr {
            width: 1260px;
            float: left;
            margin-left: 480px;
        }

        input {
            display: block;
            width: 480px;
            height: 18px;
            padding: 10px 0 10px 10px;
            margin: 20px auto;
        }
    </style>
</head>

<body>

    <img src="https://cdn-go.cn/qq-web/zc.qq.com/latest/v3/img/01-3.jpg" alt="" class="datu">

    <div class="boxr">
        <div style="width: 480px;margin: 100px auto;">
            <div style="font-size: 44px;
                margin-bottom: 20px;
            ">
                欢迎注册QQ
            </div>
            <div style="  margin-bottom: 50px;  font-size: 28px;
                margin-bottom: 64px;
                line-height: 1.2;
                color: #333;width:480px;">
                <span style="float: left;">每一天，乐在沟通。</span>
                <span style="float: right;"><a href="" style="color: #359eff;text-decoration: none; ">免费靓号</a> </span>

            </div>
            <form action="" style="margin-top: 110px;display: block;">
                <input type="text" class="zczh">
                <input type="text" class="zcmm">
                <div class="btnzc"
                    style=" cursor:pointer; height: 38px;width: 490px;color: #fff;line-height: 38px;padding: 0;text-align: center; font-size: 17px;background-color: rgb(143, 228, 15);border: none;">
                    立 即 注 册 </div>
            </form>



        </div>
    </div>

    <div style="height: 20px;margin-left: 500px;"><a href="denglu.html">去登录</a> </div>
</body>
<script src="./libs/jquery.js"></script>
<script>
    // var otxt = document.getElementById("txt");
    // $(".zczh").oninput = function(){
    //         var reg = /^(https?:\/\/)?([\da-z]{1,10}\.)?[\da-z]{2,10}\.[a-z]{2,4}$/;
    //         if(reg.test(this.value)){
    //             this.nextElementSibling.innerHTML = "网址对了";
    //         }else{
    //             this.nextElementSibling.innerHTML = "网址不对";
    //         }
    //     }
    let a = 0;
    //  正则判断账号框是否正确 正确把a设为1
    $(".zczh")[0].oninput = function () {
        var reg = /^[1-9]\d{5,11}$/;

        if (reg.test($(".zczh").val())) {
            //  console.log("duile");
            a = 1
        } else {
            //  console.log("cuole");
            a = 0
        }
    };
    let b = 0
    //  正则判断密码框是否正确 正确把a设为1
    $(".zcmm")[0].oninput = function () {
        var reg = /^[a-z0-9]{3,11}$/;

        if (reg.test($(".zcmm").val())) {
            //  console.log("mad");
            b = 1
        } else {
            //  console.log("mac");
            b = 0
        }
    }
    //   console.log(a);

    // 绑定提交按钮事件
    $(".btnzc").click(function () {
        // 如果账号密码格式都对，执行下面
        if (a === 1 && b === 1) {
            // console.log(a);
            $.ajax({
                url: "http://localhost:3000/api1",
                data: {
                    type: "register",
                    username: $(".zczh").val(),
                    password: $(".zcmm").val()
                },
                success: res => {
                    var res = JSON.parse(res)
                    //    console.log(res);
                    if (res.code === 1) {
                        if (confirm("注册成功，是否去登录")) {
                            location.href = "./denglu.html";
                        }

                    } else {
                        alert("这个用户名已经被注册过了哦");
                        $(".zcmm").val("");
                        $(".zcmm")[0].focus();
                    }
                }
            })
        }

        // 如果账号密码格式不对，分情况执行下面
        else {
            if (a !== 1 && b === 1) {
                alert("请输入正确的qq号");
            }
            if (a !== 1 && b !== 1) {
                alert("请输入正确的qq号")
            } else {
                alert("请输入正确的密码，不小于3位不大于11位")
            }
        }
    });


    // 给按钮添加点点击样式
    $(".btnzc").mousedown(function () {
        $(".btnzc").css("color", "red")

    });
    $(".btnzc").mouseup(function () {
        $(".btnzc").css("color", "#fff")

    })
</script>

</html>